<template>
	<view class="my-wrapper">
		<div class="top-box">
			<view class="user-box">
				<u-avatar :src="userInfo.headimgurl"></u-avatar>
				<text>{{ userInfo.nickname }}</text>
			</view>
			<view class="btn-box" @click="showInvite = true">
				<text>邀请</text>
				<u-icon name="arrow-right" color="#fff" size="12"></u-icon>
			</view>
		</div>
		
		<div class="main-box">
			<view class="account-box">
				<view class="title-box">
					<text>我的账户</text>
					<u-icon 
						:name="show ? 'eye' : 'eye-off'" 
						size="18" 
						@click="changeShow"
					></u-icon>
				</view>
				
				<view class="content-box">
					<view class="content-item">
						<text v-if="show">{{ userInfo.money }}</text>
						<text v-else>******</text>
						<text>账户余额</text>
					</view>
					<view class="content-item">
						<text v-if="show">{{ userInfo.incentiveMoney }}</text>
						<text v-else>******</text>
						<text>激励</text>
					</view>
				</view>
			</view>
			
			<view class="menu-box">
				<view class="menu-item">
					<u-icon name="server-fill" color="#9CDFFF"></u-icon>
					<view class="item-content" @click="showContact = true">
						<text class="tag-name">问题咨询</text>
						<view class="tag-content">
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
				</view>
				<view class="menu-item">
					<u-icon name="volume-fill" color="#9CA0FF"></u-icon>
					<view class="item-content" @click="toMessage">
						<text class="tag-name">消息通知</text>
						<view class="tag-content">
							<text v-if="unreadNum">{{ unreadNum }}</text>
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</div>
		
		<view class="position-content">
			<!-- 邀请 -->
			<u-popup 
				:show="showInvite" 
				mode="center"
				:round="10"
				closeable
				:closeOnClickOverlay="false"
				@close="closeInvite"
			>
				<view class="invite-content">
					<view class="code-box" v-if="showCode">
						<view class="title">{{ codeText }}</view>
						
						<view class="code">
							<image :src="qrcodeUrl" mode="aspectFill"></image>
						</view>
					</view>
					
					<view class="invite-box" v-else>
						<view class="title">您将邀请</view>
						<view class="item-box">
							<view class="item" @click="inviteCustomer">
								<image 
									src="../../static/team.png" 
									mode="aspectFit">
								</image>
								<view>客户</view>
							</view>
							<view class="item" v-if="userInfo.partnerLevel == 1" @click="invitePartner(userInfo.type)">
								<image 
									src="../../static/flag.png" 
									mode="aspectFit">
								</image>
								<view>伙伴</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 联系方式 -->
			<u-modal 
				:show="showContact" 
				title="客服联系方式" 
				class="modal-box"
				@confirm="showContact = false"
			>
				<view class="tel-box">
					<a href="tel:18613982718">18613982718</a>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import qrcode from 'qrcode';
	import { getMemberDetail, getNoRedNum, getInviteLink } from '@/api/index.js'
	
	export default {
		data() {
			return {
				userInfo: {
					id: '',
					headimgurl: '',
					nickname: '',
					money: 0,
					incentiveMoney: 0,
					partnerLevel: ''
				},
				unreadNum: 0,
				show: true,
				showInvite: false,
				showCode: false,
				showContact: false,
				qrcodeUrl: '',
				codeText: '邀请码'
			}
		},
		onShow() {
			this.getUserInfo()
			this.getUnreadNum()
		},
		methods: {
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				
				getMemberDetail({
					memberId: userInfo.id
				}).then(res => {
					uni.setStorageSync('userInfo', res.data)
					this.userInfo = res.data
				})
			},
			getUnreadNum() {
				getNoRedNum().then(res => {
					this.unreadNum = res.data
				})
			},
			closeInvite() {
				this.showInvite = false
				
				setTimeout(() => {
					this.showCode = false
					this.qrcodeUrl = ''
					this.codeText = '邀请码'
				}, 500)
			},
			changeShow() {
				this.show = !this.show
			},
			toMessage() {
				uni.navigateTo({
					url: '/pages/my/message'
				})
			},
			inviteCustomer() {
				this.codeText = '客户邀请码'
				this.showCode = true
				this.generateCodeFn(1)
			},
			invitePartner(type) {
				this.codeText = '伙伴邀请码'
				this.showCode = true
				if(type==4) {
					this.generateCodeFn(3)
					return
				}
				this.generateCodeFn(2)
			},
			generateCodeFn(type) {
			    getInviteLink({
					type
			    }).then(res => {
					qrcode.toDataURL(res.data, (err, url) => {
						if (err) {
							console.log(err);
						} else {
							this.qrcodeUrl = url;
						}
					});
			    });
			}
		}
	}
</script>

<style lang="scss">
.my-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	
	.top-box {
		flex-shrink: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 400rpx;
		padding: 0 40rpx;
		color: #fff;
		background-color: #195ED7;
		box-sizing: border-box;
		
		.user-box {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			
			text {
				margin-left: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		
		.btn-box {
			display: flex;
			justify-content: center;
			align-items: baseline;
			padding: 8rpx 12rpx;
			padding-left: 20rpx;
			background-color: #5386E1;
			border-radius: 8rpx;
			
			text {
				margin-right: 8rpx;
				font-weight: bold;
			}
		}
	}
	
	.main-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-top: -100rpx;
		padding: 0 20rpx 20rpx;
		
		.account-box {
			flex-shrink: 0;
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			
			.title-box {
				display: flex;
				align-items: baseline;
				font-size: 30rpx;
				font-weight: bold;
				
				text {
					margin-right: 20rpx;
				}
			}
			
			.content-box {
				display: flex;
				margin-top: 40rpx;
				
				.content-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;
					
					text {
						&:first-of-type {
							font-size: 30rpx;
							font-weight: bold;
						}
						&:last-of-type {
							margin-top: 20rpx;
							color: #999;
						}
					}
				}
			}
		}
		
		.menu-box {
			flex: 1;
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			
			.menu-item {
				display: flex;
				align-items: center;
				
				&:first-of-type {
					margin-bottom: 10rpx;
				}
				
				> .u-icon {
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				
				.item-content {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #ebebeb;
					
					.tag-name {
						font-weight: bold;
					}
					
					.tag-content {
						display: flex;
						align-items: baseline;
						
						text {
							margin-right: 10rpx;
							color: #C8312B;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	
	.invite-content {
		position: relative;
		
		.invite-box {
			padding: 50rpx 20rpx;
			
			.title {
				margin-bottom: 40rpx;
				text-align: center;
			}
			
			.item-box {
				display: flex;
				align-items: center;
				
				.item {
					padding: 0 80rpx;
					text-align: center;
					
					&:nth-of-type(2) {
						border-left: 1px solid #ebebeb;
					}
					
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
		
		.code-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 440rpx;
			height: 440rpx;
			background-color: #fff;
			border-radius: 10rpx;
			
			.title {
				margin-bottom: 20rpx;
			}
			
			.code {
				width: 320rpx;
				height: 320rpx;
				background-color: #f2f2f2;
				border: 1px solid #f2f2f2;
				
				image {
					max-width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.tel-box {
		text-align: center;
		text-decoration: underline;
	}
}
</style>
